@tabsTitleH:1.2rem;//tabs切换卡标题高
@tabsTitleLiPadding:0.4rem;//切换卡的文字外边距
/*-------------------------
    tabs组件的样式
	选项卡组件分为：选项卡标题和内容区域
---------------------------*/
.oc-tabs{
	margin:0.3rem;
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	 &>ul{
		position: absolute;
		list-style: none;
		margin-left: 0.2rem;
		&>li{
			float: left;
			position: relative;
			height: @tabsTitleH;
			line-height: @tabsTitleH;
			border: 1px solid @defaultBorderColor;
			background-color:@tabsLiBG;
			margin-left: -1px;
			button {
				width:auto;
				height: auto;
				min-width: 1.4rem;//覆盖掉默认的按钮宽高并设置最小宽度
				cursor: default;
				background: transparent;
				border: none;
				padding: 0 @tabsTitleLiPadding;
			}
			&.active{
				z-index: 1;
				border-bottom:none;
				top: -0.1rem;
				background-color: #fff;
				height: @tabsTitleH+0.1rem;//往上提的选项卡高度补全
				margin-left: -0.2rem;
				margin-right: -1px;//解决第一个元素左移，原位置偏移1px的问题
				button{
					padding:0 @tabsTitleLiPadding + 0.1rem;//偏移后补全大小
				}
			}
		}
	}
	&>.oc-tab-content{
		position: absolute;
		left:0;
		right:0;
		top:@tabsTitleH;
		bottom:0;
		background-color: #fff;
		padding: 0.3rem;
		border: 1px solid @defaultBorderColor;
		&>section{
			width: 100%;
			height: 100%;
			position: relative;
			&>*{ 
				position: absolute;//选项卡内容区域里面的元素根据内容区域绝对定位
			}
		}
	}
}
//disabled样式，按钮与对应内容
.oc-tabs>ul>li>button[disabled],
.oc-tabs>.oc-tab-content>section[disabled]
{
	cursor: all-scroll;
	cursor: not-allowed;
	color: #999;
}
